<template>
  <div id="wangeditor" >
    <div ref="editorElem" id="menu" style="background-color: #f1f1f1;border: 1px solid #ccc;"></div>
    <div ref="editorElemText" id="text" style="height: 600px;border: 1px solid #ccc;"></div>
  </div>
</template>
<script>
import E from 'wangeditor'
export default {
  name: 'wangEditor',
  data () {
    return {
      editor: null,
      editorContent: ''
    }
  },
  // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
  props: ['catchData'], // 接收父组件的方法
  mounted () {
    let self = this
    this.editor = new E('#menu', '#text')
    // 编辑器的事件，每次改变会获取其html内容
    this.editor.customConfig.onchange = html => {
      this.editorContent = html
      this.catchData(this.editorContent) // 把这个html通过catchData的方法传入父组件
    }
    this.editor.customConfig.uploadImgServer = '/upload' // 图片上传路径
    this.editor.customConfig.showLinkImg = false // 隐藏网络图片tab
    this.editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024 // 设置大小
    // 图片上传错误时提醒
    this.editor.customConfig.customAlert = function (info) {
      // info 是需要提示的内容
      self.$message.error(info)
    }
    this.editor.customConfig.customUploadImg = function (files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法

      // 上传代码返回结果之后，将图片插入到编辑器中
      files.forEach((item, index) => {
        self.uploadImg(item, insert)
      })
    }
    this.editor.customConfig.menus = [
      // 菜单配置
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ]
    this.editor.create() // 创建富文本实例
  },
  methods: {
    setData (data) {
      this.editor.txt.html(data)
    },
    uploadImg (e, fn) {
      let reader = new FileReader()
      let _self = this
      reader.onload = function (ev) {
        _self.axios.post('/oss/saveimg', _self.qs.stringify({imgarr: ev.currentTarget.result}))
          .then(res => {
            if (res.data.status === 1) {
              // _self.editor.txt.append(`<img src="${res.data.data.img}" max-width="100%">`)
              fn(res.data.data.img)
            }
          })
      }
      reader.readAsDataURL(e)
    }
  }
}
</script>
